<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getUserInfo } from "/@/api/user";
import alipayPng from "/@/assets/80_232_alipay.png";
import { quyerExchangeRate, alipayTrade } from "/@/api/pay";

defineOptions({
  name: "PersonalIndex"
});

const formData = ref<any>({});
const showPayDialog = ref(false);
const payOptions = ref("0");
const totalAmount = ref(0.0);
const exchangeRate = ref<any>({});
const payHtml = ref(undefined);
const showAlipayQrCode = ref(false);

onMounted(() => {
  getUserInfoData();
});

const getUserInfoData = () => {
  getUserInfo().then(({ data }) => {
    formData.value = data;
  });
};

const recharge = () => {
  showPayDialog.value = true;
};
const tradeChange = currentValue => {
  quyerExchangeRate({ usd_price: currentValue }).then(({ data }) => {
    exchangeRate.value = data;
  });
};

const alipayTradeBtn = () => {
  if (exchangeRate.value && exchangeRate.value.pay_price) {
    alipayTrade({ total_amount: exchangeRate.value.pay_price }).then(
      ({ data }) => {
        payHtml.value = data;
        showAlipayQrCode.value = true;
      }
    );
    showPayDialog.value = false;
  }
};
</script>

<template>
  <div class="personal-warp">
    <el-card>
      <el-form :model="formData" label-width="auto" label-position="left">
        <el-form-item label="账号名称: ">{{ formData.account }}</el-form-item>
        <el-form-item label="账号编号: ">{{ formData.nid }}</el-form-item>
        <el-form-item label="账号余额: ">
          <span>{{ formData.amount }} </span>
          <el-button link type="primary" @click="recharge">充值</el-button>
        </el-form-item>
        <el-form-item label="信用额度: ">{{ formData.quota }}</el-form-item>
        <el-form-item label="已消费信用额度: ">{{
          formData.used_quota
        }}</el-form-item>
      </el-form>
    </el-card>

    <el-dialog v-model="showPayDialog" title="账户充值" center>
      <span>
        <el-radio-group v-model="payOptions">
          <el-radio label="0">
            <img v-if="alipayPng" :src="alipayPng" class="alipay-png" />
          </el-radio>
        </el-radio-group>
        <el-divider border-style="dashed" />
        <el-row align="middle">
          <el-col :span="6">
            <span class="items-center">充值金额(美元)：</span>
          </el-col>
          <el-col :span="18">
            <el-input-number
              v-model="totalAmount"
              :precision="0"
              :min="0"
              @change="tradeChange"
            />
          </el-col>
        </el-row>
        <el-row>
          <span>充值金额：{{ exchangeRate.chiyouhuobi }}</span>
        </el-row>
        <el-row>
          <span>当前汇率：{{ exchangeRate.dangqianhuilv }}</span>
        </el-row>
        <el-row
          ><span>汇率更新时间：{{ exchangeRate.huilvupdate }}</span></el-row
        >
        <el-row
          ><span
            >需要支付的金额：<span style="font-weight: 800; color: brown">{{
              exchangeRate.pay_price
            }}</span>
            <span v-if="exchangeRate.pay_price">人民币(CNY)</span></span
          ></el-row
        >
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showPayDialog = false">取消</el-button>
          <el-button type="primary" @click="alipayTradeBtn"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="showAlipayQrCode" center class="pay-html">
      <span>
        <div v-html="payHtml" />
      </span>
      <!-- <iframe
        :srcdoc="payHtml"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="no"
        width="250"
        height="250"
        style="overflow: hidden"
        allow="payment"
        importance="high"
        referrerpolicy="no-referrer"
        sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation"
      /> -->
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.alipay-png {
  width: 116px;
  height: 40px;
}

:deep(.pay-html) {
  .el-dialog__body {
    height: 200px;
  }
}
</style>
